<!--
 * @Author: liuyonghu
 * @Date: 2021-10-27 11:18:55
 * @LastEditTime: 2021-11-03 19:07:22
 * @LastEditors: liuyonghu
 * @Description: 
 * @FilePath: /demos/红色闪屏.html
-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>

  <style type="text/css">

    .breathe-div {
      width: 2000px;
      height: 1000px;
      border: 1px solid #72081DFF;
      /*border-radius: 90%;*/
      text-align: center;
      cursor: pointer;
      /*margin:150px auto;*/
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-name: breathe;
      -webkit-animation-duration: 1500ms;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-direction: alternate;
    }

    @-webkit-keyframes breathe {
      0% {
        opacity: .4;
        box-shadow: 0 1px 2px rgba(227, 8, 15, 70), 0 1px 1px rgba(227, 8, 15, 70) inset;
      }

      100% {
        opacity: 1;
        border: 1px solid rgba(227, 8, 15, 70);
        box-shadow: 0 1px 300px #E05485FF, 0 100px 200px #72081DFF inset;
      }
    }

  </style>
</head>

<body>


<div class="breathe-div"></div>


</body>

<script>

console.log(process)


</script>

</html>